import React ,{useState,useEffect}from 'react'
import { Sidebar } from 'react-vant';
import axios from 'axios'
import {useNavigate} from 'react-router-dom'
function Side() {
    const [active, setActive] = useState(2);
    const [data,setData]=useState([])
    const navigate=useNavigate()
    useEffect(()=>{
        axios.get('/list').then(res=>{
            setData(res.data.list)
        })
    },[])
    const goto_detail=(val)=>{
        console.log(val);
        navigate(`/detail/${val.id}`,{state:val})
    }
  return (
    <div>
        <Sidebar
            value={active}
            onChange={(v) => {
                setActive(v);
                // Toast.info(`标签名 ${v + 1}`);
            }}
            >
                {
                    data.map((item,index)=>{
                        return <Sidebar.Item title={item.title} key={index}>
                            {
                                item.children.map((val,i)=>{
                                    return <div key={i} className='box' onClick={()=>goto_detail(val)}>
                                        <img src={val.img}/>
                                        <p>{val.word}</p>
                                    </div>
                                })
                            }
                        </Sidebar.Item>
                    })
                }
        </Sidebar>
    </div>
  )
}

export default Side